<div class='panel-group maccordion'>
	<div class="panel panel-default" ms-for='(i,el) in @data' ms-class='{selected:@el._selected,last:i === @data.length - 1}'>
		<div class="panel-heading" ms-click='@clickHeader(el,$event)'>
			<h4 class="panel-title">
				<i ms-if='el.iconCls' class="glyphicon maccordion-i" ms-class='el.iconCls'></i> 
				{{el.title}}
				<span class='pull-right glyphicon' ms-class="[@el._selected ? 'glyphicon-menu-down' : 'glyphicon-menu-right']"></span>
			</h4>
		</div>
		<div class="panel-collapse collapse" :on-transitionend="@transitionend(el,$event)">
			<div ms-if='el.children && el.children.length > 0' class="list-group">
				<a ms-for='(j,el,a) in el.children' href="javascript:void(0)" class="list-group-item" ms-class='{selected:el.selected}' ms-click='@selectItem(el)'>
					<i style='visibility:hidden'>空</i>
					<i ms-if='el.iconCls' class='glyphicon maccordion-i' ms-class='el.iconCls'></i>
					{{el.title}}
					<span class='marrow' ms-visible='el.selected'></span>
				</a>
			</div>
			<div ms-if='!el.children || el.children.length === 0' class="panel-body" ms-html="el.content">
			</div>
		</div>
	</div>
</div>